<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>余量详情</title>
  <script src="./js/jquery.min.js" charset="utf-8"></script>
  <script src="./js/tool.js" charset="utf-8"></script>
  <script src="./js/rem.js" charset="utf-8"></script>
  <script src="./js/vue.min.js" charset="utf-8"></script>
  <script src="./js/echarts.simple.min.js" charset="utf-8"></script>
  <script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>
  <link rel="stylesheet" href="./css/normalize.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/tool.js"></script>
</head>

<body>
  <div id="app" class="container d_container" v-cloak>
    <header>
      <ul>
        <li v-for="(date, index)  in date_list" v-bind:class="active[index]" v-on:click="changeMonth(date.month,$event)">
          <div>{{date.month}}月</div>
          <div>{{date.year}}</div>
        </li>
      </ul>
    </header>
    <div class="circle_banner">
      <div id="picturePlace" class="circle_place">

      </div>
      <div class=total_monney>
        <div>消费总额</div>
        <div class="c_org">{{use_money}}</div>
      </div>
      <div class="circle_tip">
        <ul>
          <li v-for="data in bill_list"><i v-bind:class="data.color"></i><span>{{data.name}}</span><span class="c_org">{{data.value}}</span></li>
        </ul>
      </div>
    </div>
    <div class="c_diliver"></div>
    <article class="c-article">
      <ul>
        <li v-for="list in list_details">
          <ol>
            <li><span>{{list.total._name}}</span><span>合计：<i class="c_org">{{list.total._val}}</i>元</span></li>
            <li v-for="detail of list.details"><span>{{detail._name}}</span><span>{{detail._val}}</span></li>
          </ol>
        </li>
      </ul>
      <ul>
        <li v-for="list in list_total"><span>{{list.total._name}}</span><span><i class="c_org">{{list.total._val}}</i>元</span></li>

      </ul>
    </article>
    <div class="share_partner">
      <a href="#">交费充值</a>
    </div>
    <div class="heart_info">
      <p><span>温馨提示：</span></p>
      <ul>
        <li>
          1.您可以通过历史账单查询近5个月的账单信息。
        </li>
        <li>2.尊敬的用户，根据我们的出账周期，出账时间不提供当月账单的查询，请您每月5日后进行当月的账单查询。</li>
      </ul>
    </div>
    <div class="know_more">
      <a href="#" class="font-12">点击了解更多 &gt;</a>
    </div>
    <div class="pro_warning">
      <p>
        <span class="c_3f">注：</span>
      </p>
      <p class="c_gray">
        本页面数据仅供参考使用，详情内容以当地营业厅查询内容为准。
      </p>
    </div>
    <script>
    var openId = "<%=openId%>";

      var app = new Vue({
        el: '#app',
        data: {
          active:['active','','','',''],
          myindex:0,
          history_url: 'http://wx.10010nm.com/WeiXinNM/queryInfoServlet?math='+Math.random(),
        
          history_data: {
            typeStr:'queryAccountBill',
            openId:openId,
            month: '11'
          },
          history_details: {},
          package_top: {},
          circle_color: ['#7193d2', '#f1c854', '#ee7f51', '#e4393c', '#f1c854', '#ee7f51'],
          total_bill: [],
          dataList:'',
          use_money: '',
          list_details: '',
          list_total: '',
        },
        watch: {
          use_money(val) {
            return val;
          },
          list_details(val) {
            return val;
          },
          list_total(val) {
            return val;
          }
        },
        computed: {
          date_list() {
            let date = new Date();
            let list = [];
            let [month, year] = [date.getMonth(), date.getFullYear()];
            for (let i = 0; i < 5; i++) {
              month <= 0 ?(year=year-1 ,month = month + 12) : month = month;
              list.push({
                "month": month--,
                "year": year
              })
            }
          this.dataList=list;
            return list;
          },
          bill_list() {
            return this.total_bill;
          }
        },
        mounted() {
          this.$nextTick(function() {
            // 页面初始化时调用的函数
            // 获取前一个月
            let [month] = [new Date().getMonth()];
            this.updateData(month);

          });
        },
        methods: {
          //点击月份更新数据
          changeMonth: function(month,$event) {
            myindex=$($event.currentTarget).index();
              app.active=['','','','',''];
            app.$set(app.active,myindex,'active');
            console.log(myindex);
            this.updateData(month);
          },
          // 更新数据
          updateData: function(month) {
            var context = this;
            var color = context.circle_color;
            context.history_data.month = month;
            context.dataList.map(function(val,index){
              console.log(val,index);
              if(val.month==month){
                context.history_data.year = val.year;
                return;
              }
            })
            function getBalance() {
              return axios.get(context.history_url,{ params:context.history_data});
            }

            // function getMore() {
            //     return axios.post(context.history_url, context.history_data);
            // }
            // 并发请求
            axios.all([getBalance()]).then(axios.spread(function(res_person) {
              // 两个请求现在都执行完成
              // console.log(res_person);
              // console.log(res_more);
              if (200 == res_person.status) {
                //tool.js 处理数据请求
                console.log(res_person.data.packageBalance.xAllFee);
                context.package_details = getJsonFromStr(res_person.data.packageBalance.xAllFee);

                let [total, details] = [context.package_details.total, context.package_details.detail];
                // console.log(details);
                // console.log(total);
                context.format_data(details, total, color);
              }

              // if (200 == res_more.status) {
              //     context.package_changes = res_more.data.res;
              // }
            })).catch(function(err) {
              // console.log(err);
            })
          },
          format_data: function(f_details, f_total, color) {
            var context = this;
            let cicle_data = [];
            let list_data = [];
            // console.log(color);
            for (let i in f_details) {
              cicle_data.push({
                value: f_details[i].total._val
              })
            }
            let index = 0;
            for (let i in f_details) {
              // console.log(index);
              list_data.push({
                color: 'c_' + color[index++].slice(1),
                name: f_details[i].total._name,
                value: f_details[i].total._val
              })
            }

            if (cicle_data.length) {
              context.drawCicle(cicle_data, context.circle_color);
              context.total_bill = list_data;
              context.use_money = f_total[0].total._val;
              context.list_details = f_details;
              context.list_total = f_total;
              // console.log(context.list_details);
              // console.log(context.list_total);

            }
          },
          drawList: function() {},

          drawCicle: function(cicle_data, color) {
            var context = this;
            var myChart = echarts.init(document.getElementById('picturePlace'));
            myChart.title = '环形图';
            var option = {
              animation: true,
              series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '15',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                color: color,
                data: cicle_data
              }]
            };
            myChart.setOption(option);

          }
        }
      });
      Vue.filter('active', function(value) {
        console.log(value);
        if (app.myindex == value) {
          return 'active';
        } else {
          return '';
        }
      })
    </script>

</body>



</html>
